<template>
  <Card class="sales-order-detail" :bordered="false">
    <Button style="margin-bottom: 10px" @click="back">返回</Button>

    <Collapse v-model:activeKey="collapseActiveKey">
      <CollapsePanel v-for="panel in collapsePanelSchema" :key="panel.key" :header="panel.label">
        <Description
          v-if="panel.key === 'order'"
          :column="4"
          :data="details"
          :schema="orderDescSchema"
        />
        <BasicTable v-if="panel.key === 'product'" @register="registerProductTable">
          <template #action="{ record }">
            <Tag
              color="#0084f4"
              v-if="details && details.status === OrderStatusEnum.UNPAID"
              @click="handleChangePrice(record)"
              >修改</Tag
            >
          </template>
          <template #bluePrintImgUrl="{ text }">
            <Image v-if="text" style="width: 60px; height: 60px" :src="text" />
          </template>
          <template #attachment="{ record }">
            <div class="flex-col">
              <a v-if="record.attachmentList.length" @click="handleDownloadAttachment(record)"
                >原文件</a
              >
              <a
                style="margin-top: 5px"
                v-if="record.bluePrintImgUrl"
                @click="handleDownloadBluePrint(record.bluePrintImgUrl)"
                >蓝纸</a
              >
            </div>
          </template>
        </BasicTable>
        <Description
          v-if="panel.key === 'settlement'"
          :column="3"
          :data="details"
          :schema="settlementDescSchema"
        />
        <BasicTable v-if="panel.key === 'logistics'" @register="registerLogisticsTable">
          <template #billImageList="{ text }">
            <TableImg :imgList="text" :simpleShow="true" :size="60" />
          </template>
        </BasicTable>
      </CollapsePanel>
    </Collapse>

    <!--    改价-->
    <ChangePriceModal @register="registerPriceModal" @success="handleChangePriceSuccess" />
  </Card>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { back } from '@/hooks/web/useCommon';
  import mcApi from 'mc-c2b2m-operator-api';
  import { downloadFileZip } from '@/utils';
  import { useDebounceFn } from '@vueuse/core';
  import { useModal } from '@/components/Modal';
  import { OrderStatusEnum } from '@/enums/orderEnum';
  import { downloadByUrl } from '@/utils/file/download';
  import { Description } from '@/components/Description';
  import { BasicTable, TableImg, useTable } from '@/components/Table';
  import { Tag, Card, Image, Button, Collapse, CollapsePanel } from 'ant-design-vue';
  import ChangePriceModal from '@/views/order/salesOrder/components/ChangePriceModal.vue';
  import { DetailOrderItemModel, SalesOrderDetailModel } from 'mc-c2b2m-operator-api/types/order';
  import {
    orderDescSchema,
    collapsePanelSchema,
    productTableColumns,
    settlementDescSchema,
    logisticsTableColumns,
  } from '@/views/order/salesOrder/data';

  const { OrderModule } = mcApi;
  const { SalesOrderApi } = OrderModule;

  // 折叠面板展开key
  const collapseActiveKey = ref<string[]>(collapsePanelSchema.map((schema) => schema.key));

  // 产品信息配置
  const [registerProductTable, { setTableData: setProductTableData }] = useTable({
    striped: false,
    bordered: false,
    ellipsis: false,
    canResize: false,
    pagination: false,
    showIndexColumn: false,
    columns: productTableColumns,
    actionColumn: {
      width: 150,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 物流信息配置
  const [registerLogisticsTable, { setTableData: setLogisticsTableData }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    pagination: false,
    showIndexColumn: false,
    columns: logisticsTableColumns,
  });

  // 详情数据
  const details = ref<SalesOrderDetailModel>();
  const query = useRoute().query;
  onMounted(() => {
    const { orderId } = query;
    orderId &&
      SalesOrderApi.getSalesOrderDetail(orderId + '').then((res: SalesOrderDetailModel) => {
        const { orderItemList, logisticsBillList } = res || {};
        res['paymentType'] = '全款';
        details.value = res || {};
        setProductTableData(orderItemList || []);
        setLogisticsTableData(logisticsBillList || []);
      });
  });

  // 改价操作
  const [registerPriceModal, { openModal, closeModal }] = useModal();
  function handleChangePrice(orderItem: DetailOrderItemModel) {
    openModal(true, { orderItem });
  }
  function handleChangePriceSuccess() {
    closeModal();
  }

  // 下载蓝纸
  const handleDownloadBluePrint = useDebounceFn((url: string) => {
    downloadByUrl({ url });
  }, 300);
  // 下载原文件
  const handleDownloadAttachment = useDebounceFn((record: DetailOrderItemModel) => {
    const { spuName, attachmentList } = record;
    downloadFileZip(
      attachmentList,
      `${details.value?.orderCode}+${spuName}+${details.value?.orderPlacerUserPhone}`,
    );
  }, 300);
</script>

<style scoped lang="less">
  :deep(.ant-tag) {
    cursor: pointer;
  }
</style>
